<template>
	<div class="interact" @scroll="handleScroll">
		<el-timeline>
			<el-timeline-item v-for="(item, index) in list" :key="index" :timestamp="item.create_at" placement="top">
				<div style="background-color: #f6f7fb;padding: 15px 10px;border-radius: 5px;display: flex;flex-direction: column;">
					<span>{{ item.content }}</span>
				</div>
			</el-timeline-item>
		</el-timeline>
	</div>
</template>

<script>
import { getTrackList } from '../../../api/detail.js';
import { Toast } from 'vant';
export default {
	components: {
		[Toast.name]: Toast
	},
	data() {
		return {
			page: 1,
			total: 0,
			list: []
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList(isConcat = false) {
			Toast.loading({
				message: '加载中...',
				forbidClick: true,
				duration: 0
			});
			getTrackList({
				external_user_id: sessionStorage.getItem('external_user_id'),
				page: this.page,
				limit: 10
			})
				.then(res => {
					Toast.clear();
					this.total = res.count || 0;
					if (isConcat) {
						this.list = this.list.concat(res.data);
					} else {
						this.list = res.data;
					}
				})
				.catch(err => {
					Toast.clear();
				});
		},
		handleScroll(e) {
			const oScroll = e.target;
			if (oScroll.scrollTop + oScroll.clientHeight >= oScroll.scrollHeight) {
				if (this.total > this.list.length) {
					this.page++;
					this.getList(true);
				}
			}
		}
	}
};
</script>

<style lang="less" scoped>
.interact {
	width: calc(100vw - 32px);
	overflow-x: hidden;
	overflow-y: auto;
	height: calc(100vh - 250px);
	padding: 0 16px;
	margin-top: 15px;

	/deep/.el-timeline-item__dot {
		top: -2px;
		left: -5px;
	}
}
</style>
